<template>
    <div class="box">
        <div class="settings-inner-blk p-0">
            <div class="sell-course-head comman-space">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h3>我的授课</h3>
                        <p>累计授课：12节</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="box">
        <div class="settings-inner-blk p-0">
            <div class="comman-space pb-0">
                <div class="sell-course-head withdraw-history-head border-bottom-0">
                    <h4>授课记录</h4>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="show-filter add-course-info">
                            <form action="#">
                                <div class="row gx-2 align-items-center">
                                    <div class="col-md-6 col-item">
                                        <div class=" search-group">
                                            <i class="feather-search"></i>
                                            <input type="text" class="form-control" placeholder="输入关键字">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-lg-6 col-item">
                                        <div class="form-group select-form mb-0">
                                            <select class="form-select select" id="sel1" name="sellist1">
                                                <option>进行中 </option>
                                                <option>已结课</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="settings-inner-blk comman-space pb-0">
                <table class="table table-nowrap mb-0">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>课程单元名称</th>
                            <th>班级</th>
                            <th>日期</th>
                            <th>授课视频</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="i in 6" :key="i">
                            <td>{{ i }}</td>
                            <td>小刺猬吃苹果-0 {{ i }}</td>
                            <td>初级课程班</td>
                            <td>2024-01-25</td>
                            <td>


                                <a class="mr-1 link" href="#" data-bs-toggle="modal" data-bs-target="#addrecord">设置</a>
                                <span class="m-1">未设置</span>
                                <a class="m-1" target="_blank" href="http://www.baidu.com">查看</a>

                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>
    </div>

    <app-pagination />

    <div class="modal-styles modal fade" id="addrecord" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加视频地址</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="addpaymethod-form add-course-info">
                        <form action="#">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div>
                                        <input type="text" class="form-control" placeholder="视频地址">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-theme">保存</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


</template>

<style scoped>
td,
th {
    text-align: left;
    padding: 1rem 0.5rem;
}
</style>